<template>
	<div class="personal layout-pd">
		<el-row>
			<!-- 个人信息 -->
			<el-col :xs="24" :sm="16">
				<el-card shadow="hover" header="个人信息">
					<div class="personal-user">
						<div class="personal-user-left">
							<el-upload class="h100 personal-user-left-upload"
								action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="1">
								<img
									src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500" />
							</el-upload>
						</div>
						<div class="personal-user-right">
							<el-row>
								<el-col :span="24" class="personal-title mb18">{{ currentTime
									}}，{{ state.currentPersonalForm.name }}，生活变的再糟糕，也不妨碍我变得更好！ </el-col>
								<el-col :span="24">
									<el-row>
										<el-col :xs="24" :sm="8" class="personal-item mb6">
											<div class="personal-item-label">姓名：</div>
											<div class="personal-item-value">{{ state.currentPersonalForm.name }}</div>
										</el-col>
										<el-col :xs="24" :sm="16" class="personal-item mb6">
											<div class="personal-item-label">身份：</div>
											<div class="personal-item-value">{{ state.currentPersonalForm.roles }}</div>
										</el-col>
									</el-row>
								</el-col>
							</el-row>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts" name="personal">
import { reactive, computed, onMounted } from 'vue';
import { formatAxis } from '/@/utils/formatTime';
import { Session } from '/@/utils/storage';

// 定义变量内容
const state = reactive({
	currentPersonalForm: {
		name: '',
		email: '',
		roles: [],
	},
	personalForm: {
		name: '',
		email: '',
		roles: []
	},
});

// 当前时间提示语
const currentTime = computed(() => {
	return formatAxis(new Date());
});

// 更新当前用户信息
async function updateCurrentUserInfo() {

}

// 初始化当前用户的信息
const initCurrentUserInfo = () => {
	const userInfo: UserInfo = Session.get('userInfo');
	state.currentPersonalForm.name = userInfo.name;
	state.currentPersonalForm.roles = userInfo.roleCodeList;
}

// 页面加载时
onMounted(() => {
	initCurrentUserInfo();
});
</script>

<style scoped lang="scss">
@import '../../theme/mixins/index.scss';

.personal {
	.personal-user {
		height: 130px;
		display: flex;
		align-items: center;

		.personal-user-left {
			width: 100px;
			height: 130px;
			border-radius: 3px;

			:deep(.el-upload) {
				height: 100%;
			}

			.personal-user-left-upload {
				img {
					width: 100%;
					height: 100%;
					border-radius: 3px;
				}

				&:hover {
					img {
						animation: logoAnimation 0.3s ease-in-out;
					}
				}
			}
		}

		.personal-user-right {
			flex: 1;
			padding: 0 15px;

			.personal-title {
				font-size: 18px;
				@include text-ellipsis(1);
			}

			.personal-item {
				display: flex;
				align-items: center;
				font-size: 13px;

				.personal-item-label {
					color: var(--el-text-color-secondary);
					@include text-ellipsis(1);
				}

				.personal-item-value {
					@include text-ellipsis(1);
				}
			}
		}
	}
}
</style>
